<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { queryStaffList } from '@/api/organization/staff';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { queryList } from '@/api/organization/nursing-home';
  import { queryInstDeptList } from '@/api/organization/department';
  import Edit from './edit.vue';

  const branchSelectOptions = useSelectOption({
    name: '员工所在院区',
    apiFun: queryList,
    fieldNames: {
      value: 'id',
      label: 'name',
    },
  });

  const deptSelectOptions = useSelectOption({
    name: '员工所在部门',
    tree: true,
    apiFun: queryInstDeptList,
    fieldNames: {
      value: 'deptId',
      label: 'name',
      children: 'subDeptList',
    },
  });

  const columns = [
    {
      title: '员工ID',
      dataIndex: 'staffid',
    },
    {
      title: '员工姓名',
      dataIndex: 'staffName',
    },
    {
      title: '员工性别',
      dataIndex: 'staffGenderLabel',
    },
    {
      title: '联系电话',
      dataIndex: 'staffPhone',
    },
    {
      title: '所在院区',
      dataIndex: 'branchName',
    },
    {
      title: '所在部门',
      dataIndex: 'deptName',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        branchId: '',
        staffName: '',
        deptId: '',
        staffPhone: '',
      },
    },
    table: {
      apiFun: queryStaffList,
      columns,
    },
  });

  const detailModal = useModeModalHandler({
    onSuccess() {
      page.reload();
    },
  });
</script>

<template>
  <div class="col">
    <Edit v-bind="detailModal.bindProps" />
    <TableLayout v-bind="page.bindProps" @create="detailModal.showAdd">
      <template #searchForm="{ state }">
        <a-form-item field="branchId" label="所在院区" label-col-flex="60px">
          <a-select
            v-model="state.branchId"
            :style="{ width: '100%' }"
            v-bind="branchSelectOptions.bindProps"
          />
        </a-form-item>
        <a-form-item field="deptId" label="所在部门" label-col-flex="60px">
          <a-tree-select
            v-model="state.deptId"
            style="width: 100%"
            v-bind="deptSelectOptions.bindProps"
          ></a-tree-select>
        </a-form-item>
        <a-form-item field="staffName" label="员工姓名" label-col-flex="60px">
          <a-input
            v-model="state.staffName"
            placeholder="请输入员工姓名"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="staffPhone" label="联系电话" label-col-flex="60px">
          <a-input
            v-model="state.staffPhone"
            placeholder="请输入员工联系电话"
            allow-clear
          />
        </a-form-item>
      </template>

      <template #action="{ record }">
        <ae-button purpose="view" @click="detailModal.showDetail(record)">
          查看
        </ae-button>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less"></style>
